<template>
	<view>
		<u-navbar title="发布项目"></u-navbar>
		<u-form ref="uForm" class="u-p-l-20 u-p-r-20" label-width="150">
			<u-form-item label="项目名称">
				<u-input v-model="project.projectName" placeholder="请输入项目名称" />
			</u-form-item>
			<u-form-item label="项目文件">
				<u-circle-progress active-color="#2979ff" :percent="uploadPercent" width="150" duration="0">
					<view class="u-progress-content">
						<text class='u-progress-info'>{{uploadState}}</text>
					</view>
				</u-circle-progress>
				<u-button type="primary" @click="showFile=true">上传文件</u-button>
				<nk-select-file :style="'margin-top:'+StatusBar+'px;'" v-model="showFile" @confirm="confirmFile">
				</nk-select-file>
			</u-form-item>
			<u-form-item label="项目类别">
				<view class="u-flex u-row" style="width: 100%;">
					<view class="u-flex-1">
						<view v-if="project.projectTag.length==0" class="u-light-color" @click="showTag = true">请选择项目类别
						</view>
						<u-tag :text="tag" :type="getColor(index)" class="u-m-r-20"
							v-for="(tag,index) in project.projectTag" :key="index" closeable @click="removeTag(index)"
							@close="removeTag(index)" />
					</view>
					<view class="u-input__right-icon--select u-input__right-icon__item u-m-r-20" @click="showTag = true"
						:class="{'u-input__right-icon--select--reverse': showTag}">
						<u-icon name="arrow-down-fill" size="26" color="#c0c4cc"></u-icon>
					</view>
				</view>
			</u-form-item>
			<u-form-item label="项目简介" label-position="top" class="u-border-bottom">
				<u-input v-model="project.description" type="textarea" height="200" placeholder="请输入项目简介" />
			</u-form-item>
			<u-button type="primary" class="u-m-l-20 u-m-r-20 u-m-t-20" @click="submit">提交</u-button>
			<u-popup v-model="showTag" mode="bottom" height="750" closeable>
				<view class="u-p-t-80 u-p-40">
					<u-tag :text="tag" :type="getColor(index)" class="u-m-r-20 u-m-b-20" v-for="(tag,index) in tags"
						:key="index" @click="tapTag(index)" />
				</view>
			</u-popup>
		</u-form>
		<u-tabbar :list="$store.state.tabbars" activeColor="#2979ff" mid-button></u-tabbar>
	</view>
</template>

<script>
	import {
		config
	} from '../../config.js'
	export default {
		async onLoad(option) {
			this.tags = config.prefs.slice();
		},
		data() {
			return {
				project: {
					projectName: "",
					projectTag: [],
					description: "",
					file: ""
				},
				tags: [],
				showTag: false,
				showFile: false,
				uploadState: "未上传",
				uploadPercent: 0
			}
		},
		methods: {
			getColor(index) {
				let type = ["primary", "success", "info", "warning", "error"];
				return type[index % 5];
			},
			tapTag(index) {
				this.project.projectTag.push(this.tags[index]);
				this.tags.splice(index, 1)
			},
			removeTag(index) {
				this.tags.push(this.project.projectTag[index]);
				this.project.projectTag.splice(index, 1);
			},
			async submit() {
				var [err, res] = await this.$to(this.$api.post({
					url: "/publish/project",
					data: this.project
				}));
				if (!err && res.code == 200) {
					this.project = {
						projectName: "",
						projectTag: [],
						description: "",
						file: ""
					};
					this.uploadState = "未上传";
					this.uploadPercent = 0;
					this.tags = config.prefs.slice();
					this.$toast(res.msg);
				} else {
					this.$toast(err ? null : res.msg);
				}
			},
			confirmFile(e) {
				this.uploadState = "上传中";
				uniCloud.uploadFile({
					filePath: e[0].url,
					cloudPath: this.$util.guid(),
					onUploadProgress: (progressEvent) => {
						this.uploadPercent = Math.round(
							(progressEvent.loaded * 100) / progressEvent.total
						);
					},
					success: (e) => {
						this.uploadState = "上传成功";
						this.project.file = e.fileID;
					},
					fail() {},
					complete() {}
				});
			}
		}
	}
</script>

<style lang="scss">
	@import "../../uview-ui/libs/css/style.components.scss";

	.u-input {
		&__right-icon {

			&__item {
				margin-left: 10rpx;
			}

			&--select {
				transition: transform .4s;

				&--reverse {
					transform: rotate(-180deg);
				}
			}
		}
	}

	body {
		background-color: #FFFFFF;
	}
</style>
